<template>
    <div class="about">
      <!-- 查询区----start -->
        <el-form  :inline="true" ref="formSearch" :model="formSearch" class="demo-form-inline">
            <el-form-item label="反馈类型">
                <el-input v-model="formSearch.type" placeholder="请输入公司名称"></el-input>
            </el-form-item>
            <el-form-item label="意见内容">
                <el-input v-model="formSearch.content" placeholder="请输入业务类型"></el-input>
            </el-form-item>
            <!-- <el-form-item label="添加时间">
                <el-input v-model="formSearch.addtime" placeholder="请输入城市名称"></el-input>
            </el-form-item> -->
             <el-form-item label="添加时间">
                <el-date-picker
                   v-model="formSearch.addtime"
                   type="date"
                   placeholder="选择添加时间"
                   align="right"
                   :picker-options="pickerOptions"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="操作" style="margin-left:50px;">
                <el-button type="primary"  icon="el-icon-search" @click="loadData()">查询</el-button>
                <el-button type="warning" icon="el-icon-refresh-right plain" @click="formSearch={}">重置</el-button>
                <el-button type="primary" icon="el-icon-circle-plus"  @click="addbtn()">添加</el-button>
            </el-form-item>
        </el-form>
        <!-- 查询区----end -->
    <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
            prop="type"
            label="反馈类型"
            width="180">
        </el-table-column>
        <el-table-column
            prop="content"
            label="意见类容"
             width="180">
        </el-table-column>
         <el-table-column
            prop="path1"
            label="附件1"
             width="180">
        </el-table-column>
         <el-table-column
            prop="path2"
            label="附件2"
             width="180">
        </el-table-column>
         <el-table-column
            prop="path3"
            label="附件3"
             width="180">
        </el-table-column>
        <el-table-column
            prop="phoneNum"
            label="电话"
             width="180">
        </el-table-column>
        <el-table-column
            prop="email"
            label="邮箱">
        </el-table-column>
          <el-table-column
            prop="addtime"
            label="添加时间">
             <template slot-scope="scope">
            {{scope.row.addtime | dateFilter("yyyy-mm-dd")}}
        </template>
        </el-table-column>
     <el-table-column label="操作" width="250px" fixed="right">
      <template slot-scope="scope">
          <el-button
          size="mini"
          type="success"
          @click="handleEdit(scope.row)">编辑</el-button> 
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[2,3,5,10,100, 200, 300, 400]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
     <!--添加弹出框-->
            <el-dialog :title="title" :visible.sync="addFormVisible">
                <el-form :model="form" :inline="true" label-width="200px" :rules="rules" ref="form">
                    <el-form-item label="反馈类型" >
                        <el-input v-model="form.type" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="意见内容" >
                        <el-input v-model="form.content" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="附件1" >
                        <el-input v-model="form.path1" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="附件2" >
                        <el-input v-model="form.path2" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="附件3" >
                        <el-input v-model="form.path3" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="电话" prop="phoneNum">
                        <el-input v-model="form.phoneNum" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="form.email" autocomplete="off"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="添加时间" >
                        <el-input v-model="form.addtime" autocomplete="off"></el-input>
                    </el-form-item> -->
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="add('form')">确 定</el-button>
                </div>
              </el-dialog>
    </div>
</template>
 <script>
    export default {
      data() {
        var checkPhone = (rule, value, callback) => {
            if (!value) {
            return callback(new Error('手机号不能为空'));
            } else {
            const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
            console.log(reg.test(value));
            if (reg.test(value)) {
                callback();
            } else {
                return callback(new Error('请输入正确的手机号'));
                }
            }
            };
        return {
            rules: {
            email: [
                { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
            ],
            phoneNum: [
                {required: true,validator: checkPhone, trigger: 'blur'}
            ]
            },
          tableData: [],
          currentPage:1,//当前页面，默认1
                pageSize:5,//每页显示条数
                total:100,//分页总数量，默认值随便写，初始化时赋予新值
                name:'',//查询功能
                addFormVisible:false,
                title:'',
                form:{},
                seen:false,
                formSearch: {},
        }
      }, 
      created:function(){
        this.loadData();
            },
    methods: {
        loadData(){
            let _this=this;
          this.$http.post("/api/mks/advice/queryAll?pageNo="+this.currentPage+"&pageSize="+this.pageSize,
          { type:this.formSearch.type,content:this.formSearch.content,addtime:this.formSearch.addtime}).then((response) => {
              //alert(this.formSearch.addtime)
              if(response.data.code==2000){         
                this.tableData = response.data.data.list;
                console.log(JSON.stringify(response.data.data))
                this.total = response.data.data.total;
               } 
        })        
    },
     handleSizeChange(val) {
                    // console.log(`每页 ${val} 条`);
                    this.pageSize=val;
                    this.loadData();
       },
     handleCurrentChange(val) {
              // console.log(`当前页: ${val}`);
              this.currentPage=val;
              this.loadData();
      },search(){
        this.loadData();
      },addbtn(){
        this.form={};
        this.seen=true;
         this.title="添加";
        this.addFormVisible=true;
      },handleEdit(row){
        var _row=row
         this.form =  JSON.parse(JSON.stringify(_row))
        //this.form=_row;
        console.log(this.form)
        this.seen=false;
        this.title="修改";
        this.addFormVisible=true;
      },add:function(form){
           this.$refs[form].validate((valid) => {
              if (valid) {
          
                   var _this =this;
                   var _this =this;
                   if(this.seen){
                      this.$http.post("/api/mks/advice/insert",this.form).then((response) => {
                          // console.log(response);
                      if(response.data.code==2000){
                          //提示成功
                          _this.$message({
                              type: 'success',
                              message: '添加成功!'
                          });
                          //关闭弹框
                          _this.addFormVisible=false;
                          //重新加载数据
                          _this.loadData();
                      }
                    }).catch(function (error) {
                              console.log(error);
                              this.$message.error("你错了。。。") 
                    })
                  }else{
                    // this.form.status='';
                    console.log(this.form)
                     this.$http.put('/api/mks/advice/update',this.form).then(function (response) {
                            console.log(response);
                            if(response.status == 200&&response.data.code==2000){
                                    //提示成功
                                   _this.$message({
                                        type: 'success',
                                        message:'修改成功!'
                                    });
                                    _this.loadData();
                                    }}
                        ).catch(function (error) {
                             console.log(error);
                            _this.$message.error("你错了。。。") 
                     })
                     this.addFormVisible=false;
                   } 
                   } else {
                            console.log('error submit!!');
                            return false;
                    }
                    });
                 },
                 //删除
                 handleDelete(row){
                    var _this=this;
                   this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                     confirmButtonText: '确定',
                     cancelButtonText: '取消',
                     type: 'warning'
                         }).then(() => {
                              //console.log(row.id)
                            
                          this.$http.delete('/api/mks/advice/deleteById?id='+row.id).then(function (response) {
                            console.log(response);
    
                            if(response.status == 200&&response.data.code==2000){
                                    //提示成功
                                   _this.$message({
                                        type: 'success',
                                        message: '删除成功!'
                                    });
                                    _this.currentPage=1;
                                    _this.loadData();
                                    }}
                        ).catch(function (error) {
                            console.log(error);
                            _this.$message.error("你错了。。。") 
          })   
                        }).catch(() => {
                            _this.$message({
                             type: 'info',
                             message: '已取消删除'
                         });          
                     });
                 }
        },filters: {
        //时间格式处理
        dateFilter: function (data, format = "") {
            var dt = new Date(data);
            var y = dt.getFullYear();
            var m = (dt.getMonth()+1).toString().padStart(2,"0");
            var d = dt.getDate().toString().padStart(2,"0");
            var h = dt.getHours().toString().padStart(2,"0");
            var mm = dt.getMinutes().toString().padStart(2,"0");
            var s = dt.getSeconds().toString().padStart(2,"0");
            if (format.toLocaleLowerCase() === "yyyy-mm-dd" ||
                format.toLocaleLowerCase() === "") {
                return `${y}-${m}-${d}`;
            } else if (format.toLocaleLowerCase() === "yyyy/mm/dd") {
                return `${y}/${m}/${d}`;
            } else if (format.toLocaleLowerCase() === "yyyy-mm-dd hh:mm:ss") {
                return `${y}-${m}-${d} ${h}:${mm}:${s}`;
            } else if (format.toLocaleLowerCase() === "yyyy/mm/dd hh:mm:ss") {
                return `${y}/${m}/${d} ${h}:${mm}:${s}`;
            } else {
                return `输入的时间格式有误`;
            }
        }
  }
}
  </script>
  <style >
  .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
        }
        .avatar {
            width: 100px;
            height: 100px;
            display: block;
        }
  </style>